<template>
<!-- 缺陷管理-发起缺陷 -->
  <div class="addposiman">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="缺陷编号：" prop="qxbh">
                <el-input disabled v-model="formData.qxbh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <!-- qxzsbmc -->
            <el-col :span="8">
              <el-form-item label="缺陷设备：" prop="qxzsb">
                <el-input disabled v-model="formData.qxzsb" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item  label="站线类型：" prop="zxlx">
                <el-input
                disabled
                  v-model="formData.zxlx"
                  placeholder
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="电站名称：" prop="dzorxlmc">
                <el-input disabled v-model="formData.dzorxlmc" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="电压等级：" prop="dydj">
                <el-select
                  v-model="formData.dydj"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in getDydjList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备类型：" prop="sblx">
                <el-select
                disabled
                  v-model="formData.sblx"
                  size="small"
                  placeholder
                  :style="{width: '100%'}"
                  filterable
                >
                  <el-option
                    v-for="item in equipmenttype_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="设备种类：" prop="sbzl">
                <el-select
                  v-model="formData.sbzl"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in equipmentkind_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="设备型号：" prop="sbxh">
                <el-input disabled v-model="formData.sbxh" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="生产厂家：" prop="sccj">
                <el-input
                disabled
                  v-model="formData.sccj"
                  placeholder
                  clearable
                  :style="{width: '100%'}"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- bjzl bzlx -->
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="部件：" prop="bjzl">
                <el-select
                  v-model="formData.bjzl"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in parts_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="部件种类：" prop="bzlx">
                <el-select
               
                  v-model="formData.bzlx"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                  
                    v-for="item in partskind_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="投运日期：" prop="tyrq">
                <el-date-picker
                 disabled
                  v-model="formData.tyrq"
                  type="date"
                  placeholder
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="发现方式：" prop="fxlylx">
                <el-select
                  v-model="formData.fxlylx"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in discovery_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现人：" prop="fxr">
                <el-input disabled v-model="formData.fxr" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现日期：" prop="fxrq">
                <el-date-picker
                disabled
                  v-model="formData.fxrq"
                  type="date"
                  placeholder
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="发现班组：" prop="fxbz">
                <el-input disabled v-model="formData.fxbz" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发现人单位：" prop="fxrdw">
                <el-input disabled v-model="formData.fxrdw" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <!-- djsj -->
            <el-col :span="8">
              <el-form-item label="填报时间：" prop="djsj">
                <el-date-picker
                disabled
                  v-model="formData.djsj"
                  type="datetime"
                  placeholder
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :style="{width: '100%'}"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="缺陷部位：" prop="qxbw">
                <el-select
                  v-model="formData.qxbw"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in defectparts_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷描述：" prop="qxms">
                <el-input v-model="formData.qxms" placeholder="请输入缺陷描述!" clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缺陷性质：" prop="qxxz">
                <el-select
                  v-model="formData.qxxz"
                  size="small"
                  placeholder="请选择"
                  :style="{width: '100%'}"
                >
                  <el-option
                    v-for="item in defectnature_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="8">
              <el-form-item label="分类依据：" prop="flyj">
                <el-input v-model="formData.flyj" placeholder clearable :style="{width: '100%'}" />
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="缺陷内容：" >
                <el-button type="text" @click="handleContent">生成内容</el-button>
                <el-input v-model="formData.qxnr" placeholder clearable :style="{width: '80%'}" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="addposiman-btn">
                <el-button class="table-query" type="primary" @click="submitForm">保存</el-button>
                <el-button class="table-query" type="primary" @click="clsoe">取消</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Prop } from "vue-property-decorator";
import { JointInspectionModule } from "@/store/modules/JointInspection";

import time from "@/utils/time.js";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class addposiman extends Vue {
  @Prop() tableSelect:any
  formData:any = {
    qxbh: "",
    qxzsb: "",
    zxlx: "",
    dzorxlmc: "",
    dydj: "",
    sblx: "",
    sbzl: "",
    sbxh: "",
    sccj: "",
    bjzl: "",
    bzlx: "",
    tyrq: "",
    fxlylx: "",
    fxr: "",
    fxrq: "",
    fxbz: "",
    fxrdw: "",
    djsj: "",
    qxbw: "",
    qxms: "",
    qxxz: "一般",
    flyj: "",
    qxnr: "",
  };
  rules = {
    // qxbh: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxzsb: [{ required: true, message: "请输入内容", trigger: "blur" }],
    zxlx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // sblx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxlylx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxr: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxrq: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxbz: [{ required: true, message: "请输入内容", trigger: "blur" }],
    fxrdw: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxxz: [{ required: true, message: "请输入内容", trigger: "blur" }],
    qxnr: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  // 电压等级备选项：
  voltagelevel_options: Array<optionList> = [
    
  ];
  // 设备类型备选项：
  equipmenttype_options: Array<optionList> = [
 
  ];
  // 设备种类备选项：
  equipmentkind_options: Array<optionList> = [

  ];
  // 部件备选项：
  parts_options: Array<optionList> = [
 
  ];
  // 部件种类备选项：
  partskind_options: Array<optionList> = [

  ];
  // 发现方式备选项：
  discovery_options: Array<optionList> = [
    {
      value: "联合巡检",
      label: "联合巡检",
    }
  ];
  // 缺陷部位备选项：
  defectparts_options: Array<optionList> = [
 
  ];
  // 缺陷性质备选项：
  defectnature_options: Array<optionList> = [
    {
      value: "一般",
      label: "一般",
    },
    {
      value: "严重",
      label: "严重",
    },
    {
      value: "危机",
      label: "危机",
    },
  ];

  $refs!: {
    elForm: any;
  };
  get getDydjList(){
    return JointInspectionModule.getDydjList
  }
  //创建
  clsoe() {
    this.$emit("close");
  }
  // 生成内容
  handleContent(){
    this.tableSelect.map(item=>{
      if (!item.SBJL) {
        item.SBJL=' '
      }
       if(!item.BDZMC){
        item.BDZMC=' '
       }
        if(!item.XJDW){
        item.XJDW=' '
       }
        if(!item.XSJG){
        item.XSJG=' '
       }
    })
    console.log(this.tableSelect);
    console.log(this.tableSelect);
    
    this.formData.qxnr = this.tableSelect[0].BDZMC + this.formData.qxzsb +this.tableSelect[0].SBJL  +this.tableSelect[0].XSJG
    console.log(this.formData.qxnr);
    
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
      console.log(this.resultData);
      
      let formData=new FormData();
      formData.append('bgid',this.tableSelect[0].BGID||'');
      formData.append('fxrid',this.resultData[1].USERID||'');
      formData.append('fxbzid',this.resultData[1].WHBZID||'');
      formData.append('fxrdwid',this.resultData[1].YWDWID||'');
      formData.append('qxbh',this.formData.qxbh );
      formData.append('qxzsb',this.formData.qxzsb );
      formData.append('zxlx',this.formData.zxlx );
      formData.append('dzorxlmc',this.formData.dzorxlmc );
      formData.append('dydj',this.formData.dydj );
      formData.append('sblx',this.formData.sblx );
      formData.append('sbzl',this.formData.sbzl );
      formData.append('sbxh',this.formData.sbxh );
      formData.append('sccj',this.formData.sccj );
      formData.append('bjzl',this.formData.bjzl );
      formData.append('bzlx',this.formData.bzlx );
      formData.append('tyrq',this.formData.tyrq );
      formData.append('fxlylx',this.formData.fxlylx );
      formData.append('fxr',this.formData.fxr );
      formData.append('fxrq',this.formData.fxrq );
      formData.append('fxbz',this.formData.fxbz );
      formData.append('fxrdw',this.formData.fxrdw );
      formData.append('djsj',this.formData.djsj );
      formData.append('qxbw',this.formData.qxbw );
      formData.append('qxms',this.formData.qxms );
      formData.append('qxxz',this.formData.qxxz );
      formData.append('flyj',this.formData.flyj );
      formData.append('qxnr',this.formData.qxnr );

      (this as any).$services
            .saveQxjl({ data: formData,method:'post',postparams:true})
            .then((result: any) => {
              // console.log(result);
              if (result.code===200) {
                    this.$message({
                      showClose: true,
                      message: result.message,
                      type: 'success'
                    });
                    this.$emit("close");
                  }else{
                     this.$message({
                      showClose: true,
                      message: result.message,
                      type: 'warning'
                    });
                    this.$emit("close");
                  }
            })
            .catch((err: object) => {
              console.log(err);
              this.$emit("close");
            });
      
      // this.$emit("close");
    });
  }
  resultData=[]
  init(){
    (this as any).$services
          .getQxDefaultDetail({ })
          .then((result: any) => {
            // console.log(result);
            this.resultData=result.data
           this.formData.qxbh=result.data[0].QXBH 
           this.formData.fxr=result.data[1].USERNAME 
           this.formData.fxbz=result.data[1].WHBZ
           this.formData.fxrdw=result.data[1].YWDW
           this.formData.djsj=result.data[1].SDATE
          //  console.log(this.formData.qxbh);
           
          })
          .catch((err: object) => {
            console.log(err);
          });
    
  }
  mounted() {
    this.init()
    var aData=new Date()
    console.log(this.tableSelect,56); 
    
    var sj= time(aData)
          this.formData.dydj=this.tableSelect[0].DMMC||''
           this.formData.qxzsb=this.tableSelect[0].SBMC||''
           this.formData.sblx=this.tableSelect[0].SBLXMC||'' 
           
           this.formData.zxlx='电站' 
           this.formData.dzorxlmc=this.tableSelect[0].BDZMC ||''
           this.formData.sccj=this.tableSelect[0].SCCJ ||'' 
           this.formData.tyrq=this.tableSelect[0].TYRQ ||''
           this.formData.fxlylx='联合巡检' 
           this.formData.tyrq=sj
           this.formData.fxrq=sj  
           
           
    
  }
}
</script>

<style lang="scss" scoped>
.addposiman {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

